<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>店铺信息统计</title>
    <!-- 引入Vue.js -->
    <script src="../../js/vue.js"></script>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="../../css/index.css">
    <!-- 引入Element UI组件库 -->
    <script src="../../js/index.js"></script>
    <!-- 引入axios -->
    <script src="../../js/axios.min.js"></script>
    <!-- 引入 ECharts -->
    <script src="../../js/echarts.js"></script>
    <style>
        .page-container {
            padding: 20px;
            background-color: #f5f7fa;
        }
        .card-container {
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        .card-container:hover {
            transform: translateY(-5px);
        }
        .chart-row {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        .chart-container {
            width: 100%;
            height: 400px;
            min-width: 300px;
            flex: 1;
        }
        .page-title {
            margin-bottom: 10px;
            color: #1890ff;
        }
        .table-card {
            margin-bottom: 30px;
        }
        .chart-card {
            flex: 1;
            min-width: 300px;
        }
        .statistics-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .statistic-item {
            background-color: white;
            padding: 15px;
            border-radius: 6px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .statistic-value {
            font-size: 24px;
            font-weight: bold;
            margin: 5px 0;
        }
        .statistic-label {
            color: #8c8c8c;
            font-size: 14px;
        }
        .statistic-row {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }
        .statistic-col {
            flex: 1;
        }
        .el-card__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .refresh-btn {
            padding: 5px 10px;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="page-container">
        <!-- 页面标题 -->
        <h1 class="page-title">店铺信息管理系统</h1>

        <!-- 统计概览 -->
        <div class="statistic-row">
            <div class="statistic-col">
                <div class="statistic-item">
                    <div class="statistic-label">总店铺数</div>
                    <div class="statistic-value">{{ totalShops }}</div>
                </div>
            </div>
            <div class="statistic-col">
                <div class="statistic-item">
                    <div class="statistic-label">正常店铺</div>
                    <div class="statistic-value" style="color: #52c41a">{{ normalShops }}</div>
                </div>
            </div>
            <div class="statistic-col">
                <div class="statistic-item">
                    <div class="statistic-label">待审核店铺</div>
                    <div class="statistic-value" style="color: #faad14">{{ pendingAuditShops }}</div>
                </div>
            </div>
            <div class="statistic-col">
                <div class="statistic-item">
                    <div class="statistic-label">已通过审核</div>
                    <div class="statistic-value" style="color: #1890ff">{{ approvedShops }}</div>
                </div>
            </div>
        </div>

        <!-- 店铺数据表格 -->
        <el-card shadow="hover" class="card-container table-card">
            <div slot="header" class="statistics-header">
                <h2>店铺信息列表</h2>
                <el-button type="primary" size="mini" class="refresh-btn" @click="refreshData">
                    <i class="el-icon-refresh"></i> 刷新
                </el-button>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    border
                    stripe
                    highlight-current-row
                    :loading="tableLoading">
                <el-table-column prop="shopId" label="店铺ID" width="80"></el-table-column>
                <el-table-column prop="shopName" label="店铺名称" width="150"></el-table-column>
                <el-table-column prop="contactPhone" label="联系电话" width="120"></el-table-column>
                <el-table-column prop="shopAddress" label="店铺地址"></el-table-column>
                <el-table-column prop="businessType" label="经营类型" width="180"></el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'" effect="dark">
                            {{ scope.row.status === '0' ? '正常' : '停用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="auditStatus" label="审核状态" width="120">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.auditStatus === '0'" type="info" effect="dark">待审核</el-tag>
                        <el-tag v-else-if="scope.row.auditStatus === '1'" type="success" effect="dark">通过</el-tag>
                        <el-tag v-else type="danger" effect="dark">拒绝</el-tag>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div style="margin-top: 10px; text-align: right;">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 50]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalShops">
                </el-pagination>
            </div>
        </el-card>

        <!-- 统计图表 - 饼状图 -->
        <div class="chart-row">
            <el-card shadow="hover" class="card-container chart-card">
                <div slot="header">
                    <h2>店铺状态分布</h2>
                </div>
                <div id="statusChart" class="chart-container"></div>
            </el-card>

            <el-card shadow="hover" class="card-container chart-card">
                <div slot="header">
                    <h2>店铺审核状态分布</h2>
                </div>
                <div id="auditStatusChart" class="chart-container"></div>
            </el-card>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                statusChart: null,
                auditStatusChart: null,
                tableLoading: false,
                currentPage: 1,
                pageSize: 10,
                totalShops: 0,
                normalShops: 0,
                pendingAuditShops: 0,
                approvedShops: 0
            };
        },
        mounted() {
            // 初始化图表
            this.statusChart = echarts.init(document.getElementById('statusChart'));
            this.auditStatusChart = echarts.init(document.getElementById('auditStatusChart'));

            // 窗口大小变化时重绘图表
            window.addEventListener('resize', () => {
                this.statusChart.resize();
                this.auditStatusChart.resize();
            });

            // 加载数据
            this.refreshData();
        },
        methods: {
            refreshData() {
                this.getShopList();
                this.getShopStatusCount();
                this.getShopAuditStatusCount();
                this.getShopCount();
            },
            getShopCount() {
                axios.get(`/vegetablemarketexpress/shop/getShopCount`)
                    .then(response => {
                        this.totalShops = response.data.data;
                    })
                    .catch(error => {
                        this.$message.error('获取店铺总数失败：' + error.message);
                        this.tableLoading = false;
                    });
            },
            getShopList() {
                this.tableLoading = true;
                axios.get(`/vegetablemarketexpress/shop/list?page=${this.currentPage}&size=${this.pageSize}`)
                    .then(response => {
                        this.tableData = response.data.data;
                        this.totalShops = response.data.total;
                        this.tableLoading = false;
                    })
                    .catch(error => {
                        this.$message.error('获取店铺列表失败：' + error.message);
                        this.tableLoading = false;
                    });
            },
            getShopStatusCount() {
                axios.get('/vegetablemarketexpress/shop/statusCount')
                    .then(response => {
                        const data = response.data;
                        const chartData = [];

                        // 处理数据并统计正常店铺数量
                        data.forEach(item => {
                            const name = item.status === '0' ? '正常' : '停用';
                            const color = item.status === '0' ? '#52c41a' : '#f5222d';

                            chartData.push({
                                name,
                                value: item.count,
                                itemStyle: { color }
                            });

                            // 更新概览统计
                            if (item.status === '0') {
                                this.normalShops = item.count;
                            }
                        });

                        // 设置饼图配置
                        const option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 10,
                                data: chartData.map(item => item.name)
                            },
                            series: [
                                {
                                    name: '店铺状态',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    avoidLabelOverlap: false,
                                    itemStyle: {
                                        borderRadius: 10,
                                        borderColor: '#fff',
                                        borderWidth: 2
                                    },
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '16',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: chartData
                                }
                            ]
                        };

                        this.statusChart.setOption(option);
                    })
                    .catch(error => {
                        this.$message.error('获取店铺状态统计失败：' + error.message);
                    });
            },
            getShopAuditStatusCount() {
                axios.get('/vegetablemarketexpress/shop/auditStatusCount')
                    .then(response => {
                        const data = response.data;
                        const chartData = [];
                        const colors = ['#faad14', '#52c41a', '#f5222d']; // 待审核、通过、拒绝

                        // 处理数据
                        data.forEach(item => {
                            let name, colorIndex;

                            if (item.auditStatus === '0') {
                                name = '待审核';
                                colorIndex = 0;
                                this.pendingAuditShops = item.count; // 更新概览统计
                            } else if (item.auditStatus === '1') {
                                name = '通过';
                                colorIndex = 1;
                                this.approvedShops = item.count; // 更新概览统计
                            } else {
                                name = '拒绝';
                                colorIndex = 2;
                            }

                            chartData.push({
                                name,
                                value: item.count,
                                itemStyle: { color: colors[colorIndex] }
                            });
                        });

                        // 设置饼图配置
                        const option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 10,
                                data: chartData.map(item => item.name)
                            },
                            series: [
                                {
                                    name: '审核状态',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    avoidLabelOverlap: false,
                                    itemStyle: {
                                        borderRadius: 10,
                                        borderColor: '#fff',
                                        borderWidth: 2
                                    },
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '16',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: chartData
                                }
                            ]
                        };

                        this.auditStatusChart.setOption(option);
                    })
                    .catch(error => {
                        this.$message.error('获取店铺审核状态统计失败：' + error.message);
                    });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getShopList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getShopList();
            }
        }
    });
</script>
</body>
</html>
